import React from 'react';

import StandardTable from "./StandardTable";
import {secs2time, ts2date, ts2time} from "../../utils/utils";
import {Divider} from "antd";
import * as ReactDOM from "react-dom";
import ModalMap from "./ModalMap";


import {Table, Alert,Icon,Input,Button} from 'antd';

const { Search } = Input;
class MileageDataTable extends React.Component {
  state = {
    selectedRows: [],
    pointPosition: null,
    visible: false,
    filter:''
  };

  componentDidMount() {
    let domNode = ReactDOM.findDOMNode(this.table_Node);
    if (domNode) {
      domNode.addEventListener('click', this.handleTableClick);
    }
  }

  handleTableClick = (e) => {
    e.preventDefault();
    const _xy = e.target.dataset.xy;
    if (_xy) {
      const [lat, lng] = _xy.split(', ');
      const pointPosition = {lat: +lat, lng: +lng};
      this.setState({pointPosition, visible: true,})
    }
  };

  handleDataFormat = (data, type) => {
    if (!data) return;
    // const isArray = Object.prototype.toString.call(data[0]) === '[object Array]'
    let _data = data;
    const isArray = Array.isArray(data[0]);
    if (isArray) {
      _data = data[0]
    }
    return _data.map(item => {
      const {
        avg_speed,
        device_id,
        duration,
        end_lat,
        end_lng,
        end_mileage,
        endtime,
        id,
        mileage,
        start_lat,
        start_lng,
        start_mileage,
        starttime,
      } = item;

      const isFloat = start_lat % 1 !== 0;
      const start_xy = isFloat ? `${start_lat}, ${start_lng}` : `${parseInt(start_lat) / 1e6}, ${parseInt(start_lng) / 1e6}`;
      const end_xy = isFloat ? `${end_lat}, ${end_lng}` : `${parseInt(end_lat) / 1e6}, ${parseInt(end_lng) / 1e6}`;
      let time_slot;
      if (type !== 'detail') {
        time_slot = `${ts2date(starttime)}~${ts2date(endtime)}`
      } else {
        time_slot = `${ts2time(starttime)}~${ts2time(endtime)}`
      }
      return {
        key: id,
        device_id: device_id,
        avg_speed: (avg_speed / 100 * 3.6).toFixed(2),
        duration: secs2time(duration * 1e3),
        end_xy,
        start_xy,
        time_slot,
        start_mileage: (start_mileage / 1000).toFixed(2),
        end_mileage: (end_mileage / 1000).toFixed(2),
        mileage: (mileage / 1000).toFixed(2),
      }
    })
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };


  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    // const { dispatch } = this.props;
    // const { formValues } = this.state;
    // const filters = Object.keys(filtersArg).reduce((obj, key) => {
    //   const newObj = { ...obj };
    //   newObj[key] = getValue(filtersArg[key]);
    //   return newObj;
    // }, {});
    //
    // const params = {
    //   currentPage: pagination.current,
    //   pageSize: pagination.pageSize,
    //   ...formValues,
    //   ...filters,
    // };
    // if (sorter.field) {
    //   params.sorter = `${sorter.field}_${sorter.order}`;
    // }
    //
    // dispatch({
    //   type: 'rule/fetch',
    //   payload: params,
    // });
  };

  handleCloseModal = () => {
    this.setState({visible: false,})
  };

  handleSearch = e => {
    this.setState({
      filter : e.target.value
      }
    )
  };
  filterHandler=(arr,filter)=>{
    if(arr.length===0)return arr;
    var res=[];
    arr.forEach(function (item,index) {
       var str='';
        str+=item.device_id+item.device_name;
        //用device_name的长度来排序
        item.device_name=item.device_name||'';
        if(str.indexOf(filter)!==-1){
          res.push(item)
        }
    });
    return res;
  };

  render() {
    const {reportData, loading, type,} = this.props;
    const {selectedRows, visible, pointPosition,filter} = this.state;

    // todo fix
    const columns = [
      {
        dataIndex: "device_id",
        title: "设备编号",
        key: 'key',
        sorter: (a, b) => a.device_id - b.device_id,
      },
      {
        dataIndex: "device_name",
        title: "设备名称",
        sorter: (a, b) => a.device_name.length>b.device_name.length,
      },
      {
        dataIndex: "mileage",
        title: "里程(km)",
        sorter: (a, b) => a.mileage - b.mileage,
      },
    ];
    return (
      <div>
        <Input
            onChange={this.handleSearch.bind(this)}
            value={filter}
            style={{width:200}}
            placeholder="id或名称"
        />
        <Table
            columns={columns}
            dataSource={this.filterHandler(reportData,filter)}
            loading={loading}
            bordered={false}
            rowKey="key"
        />

        {/*<StandardTable ref={table_Node => this.table_Node = table_Node}*/}
        {/*               selectedRows={selectedRows}*/}
        {/*               loading={loading}*/}
        {/*               data={this.handleDataFormat(reportData, type)}*/}
        {/*               columns={columns}*/}
        {/*               onSelectRow={this.handleSelectRows}*/}
        {/*               onChange={this.handleStandardTableChange}*/}
        {/*/>*/}

        {/*<ModalMap visible={visible} pointPosition={pointPosition} onClose={this.handleCloseModal}/>*/}
      </div>
    )
  }
}


export default MileageDataTable;
